<template>
    <div class="container">
        <header-nav/>
        <div class="content-wrapper">
            <div class="left-side">
                <div class="input-wrapper">
                    <el-autocomplete
                            class="inline-input"
                            v-model="state1.value"
                            :fetch-suggestions="querySearch"
                            placeholder="请输入内容"
                            @select="handleSelect"
                            clearable
                            suffix-icon="el-icon-search"
                            @keyup.enter.native="isBlur(state1.value)"
                            v-loading.fullscreen.lock="fullscreenLoading"
                    ></el-autocomplete>
                </div>
                <div class="swipers-wrapper">
                    <el-carousel :interval="4000" type="card" height="180px">
                        <el-carousel-item v-for="item in imgList" :key="item.id">
                            <img :src="item.url" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="post-list">
                    <div class="post-item border-bottom" v-for="item in postList" :key="item.id">
                        <div class="post-img">
                            <img src="@/assets/styles/images/post-img4.jpg" alt="">
                        </div>
                        <div class="post-details" @click="goDetail(item.id)">
                            <div class="post-title">
                                <span>{{ item.title }}</span>
                            </div>
                            <div class="post-desc">
                                <span>{{ item.desc }}</span>
                            </div>
                            <div class="post-tags">
                                <span class="border" v-if="item.isFront">前端开发</span>
                                <span class="border" v-if="item.isAfter">后端开发</span>
                            </div>
                        </div>
                        <div class="poster">
                            <div class="post-avatar">
                                <img src="@/assets/styles/images/avatar2.jpg" alt="">
                            </div>
                            <div class="post-time">
                                <span>{{ item.poster }}</span>
                                <span>{{item.create_time | changeTime}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-side">
                <div class="tech-share">
                    <div class="tech-title">
                        <p>热门分享</p>
                    </div>
                    <div class="tech-content border-bottom">
                        <p class="content-title">在线免费生成IntelliJ IDEA 15.0注册码</p>
                        <div class="poster-details">
                            <div class="content-avatar">
                                <img src="@/assets/styles/images/avatar2.jpg" alt="">
                            </div>
                            <div class="content-poster">
                                <span>我就是狗剩啊</span>
                            </div>
                            <div class="content-time">
                                <span>3小时前</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="topic">
                    <div class="topic-title">
                        <p>专题推荐</p>
                    </div>
                    <div class="topic-cells">
                        <div class="img-item" v-for="item in topicList" :key="item.id">
                            <img :src="item.url" alt="">
                            <div class="item-title">{{ item.name }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <my-footer/>
    </div>
</template>

<script>
    import HeaderNav from '@/components/HeaderNavbar'
    import Footer from '@/components/Footer'
    import {mapMutations} from 'vuex'
    import {getDataByList, getInfo, getDataById, search} from '@/api/article'
    export default {
        name: 'Index',
        data() {
            return {
                fullscreenLoading: false,
                restaurants: [],
                state1: {
                    value: ''
                },
                kWord: '',
                swiperOption: {
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    loop: true,
                    autoplay: true,
                    // navigation: {
                    //   nextEl: '.swiper-button-next',
                    //   prevEl: '.swiper-button-prev',
                    // },
                },
                imgList: [
                    {
                        id: '01',
                        url: 'http://p1.music.126.net/7N2n7cHVGRd9IJGn-kS79w==/109951163645087710.jpg'
                    },
                    {
                        id: '02',
                        url: 'http://p1.music.126.net/3cyDU_KT01Lni9PY8kouYw==/109951163649404185.jpg'
                    },
                    {
                        id: '03',
                        url: 'http://p1.music.126.net/MEl979XoEzg_llrPrLPr4w==/109951163649396809.jpg'
                    },
                    {
                        id: '04',
                        url: 'http://p1.music.126.net/g6WLzJriqy8OreY5Y8UXrA==/109951163642515765.jpg'
                    }
                ],
                postList: [],
                topicList: [
                    {
                        id: '01',
                        url: 'https://img.awesomes.cn/ts/r1/5896966974.jpg',
                        name: 'Vue'
                    },
                    {
                        id: '02',
                        url: 'https://img.awesomes.cn/ts/u1/2740847800.jpg',
                        name: 'React'
                    },
                    {
                        id: '03',
                        url: 'https://img.awesomes.cn/ts/f5/100269130.jpg',
                        name: 'Bootstrap'
                    },
                    {
                        id: '04',
                        url: 'https://img.awesomes.cn/ts/d1/5879978563.jpg',
                        name: 'JQuery'
                    },

                ]
            }
        },
        computed: {},
        methods: {
            ...mapMutations(['saveItem', 'saveList']),
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) > 0);
                };
            },
            loadAll() {
                getInfo().then(res => {
                    this.restaurants = res.data
                })
            },
            // 搜索功能
            handleSelect(item) {
                let data = {
                    value: item.value
                };
                let _this = this
                this.fullscreenLoading = true;
                setTimeout(() => {
                    search(data).then(res => {
                        if (res.data.length !== 0) {
                            localStorage.removeItem('list')
                            _this.saveList({list: res.data})
                            _this.$router.push('/search')
                        } else {
                            _this.$message({
                                message: '没有找到相关信息哦～',
                                type: 'warning',
                                offset: 500,
                                showClose: true,
                            })
                        }
                    })
                    _this.fullscreenLoading = false;
                }, 500);

            },
            isBlur() {
                this.handleSelect(this.state1)
            },
            loadCategory() {
                getDataByList().then(res => {
                    console.log(res);
                    this.postList = res.data.data
                })
            },
            goDetail(id) {
                getDataById(id).then(res => {
                    let data = res.data;
                    this.saveItem({value: data})
                });
                this.$router.push('/details/' + id)
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
            this.loadCategory();
            let time = new Date().getTime()
            console.log(time)
        },
        components: {
            HeaderNav,
            MyFooter: Footer
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~@/assets/styles/css/variable.styl"
    .content-wrapper
        display: flex;
        padding: 2% 14%;

        .left-side >>> .el-autocomplete
            width: 100%;
        .left-side >>> .el-carousel
            width: 100%;
            img
                width 100%;
        .left-side
            flex: 3;
            .swipers-wrapper
                padding: 30px 0 10px;
                background: #eee;
                margin: 20px 0;
            .post-list
                border: 1px solid #f9f9f9;
                box-shadow: 0 0 10px 5px #f5f5f5;
                .post-item
                    display: flex;
                    width: 100%;
                    background: #fff;
                    padding: 10px 0;
                    .post-img
                        width: 12%;
                        padding: 5px 10px 0;
                        img
                            width: 100%;
                    .post-details
                        width: 65%;
                        margin-left: 10px;
                        .post-title
                            font-size: 16px;
                            font-weight: 600;
                            color: #333;
                            padding: 15px 0;
                            &:hover
                                color: $themeColor;
                                cursor: pointer;
                        .post-desc
                            font-size: 14px;
                            color: #737373;
                            font-weight: 400;
                            width: 400px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        .post-tags
                            margin-top: 10px;
                            span
                                padding: 0 8px;
                                color: $themeColor
                                font-size: 12px;
                                font-weight 400;
                                margin-right: 5px;
                                &:before
                                    border-color: $themeColor
                    .poster
                        width: 25%;
                        display: flex;
                        .post-avatar
                            width: 13%;
                            padding-top: 40px;
                            img
                                width: 100%;
                                border-radius: 50%;
                        .post-time
                            font-size: 12px;
                            padding-top: 45px;
                            span
                                margin: 0 5px;
                                &:last-child
                                    color: #828282;

    .right-side
        flex: 1;
        .tech-share, .topic
            padding: 10px 15px;
            background: #fff;
            border: 1px solid #f5f5f5;
            box-shadow: 0 0 10px 5px #f5f5f5;
            margin-left: 15px;
            margin-bottom: 20px;
            .tech-title, .topic-title
                font-size: 16px;
                border-bottom: 1px solid $themeColor;
                p
                    margin: 10px 0;
            .tech-content
                padding: 10px 0;
                &:before
                    border-color: #f3f3f3;
                .content-title
                    margin: 8px 0;
                    font-size: 12px;
                    color: #777;
                    font-weight: 400;
                    &:hover
                        color: $themeColor;
                        cursor: pointer;
                .poster-details
                    display: flex;
                    .content-avatar
                        width: 13%;
                        img
                            width: 100%;
                            border-radius: 50%;
                    .content-poster
                        font-size: 12px;
                        line-height: 26px;
                        margin-left: 5px;
                        color: #666;
                        flex: 1;
                    .content-time
                        font-size: 12px;
                        line-height: 26px;
                        color: #999;
            .topic-cells
                width: 100;
                position: relative;
                margin-top: 10px;
                .img-item
                    width: 48%;
                    padding: 1%;
                    display: inline-block;
                    position: relative;
                    img
                        width: 100%;
                    .item-title
                        position: absolute;
                        bottom: 5%;
                        left: 2%;
                        right: 0;
                        width: 96%;
                        text-align: center;
                        color: #fff;
                        font-size: 14px;
                        background: #ffffff74;
                        &:hover
                            color: $themeColor;
                            cursor: pointer;

</style>
